<template>
	<view>
		<u-navbar :autoBack="true" title="收款账户" bgColor="#F0F0F0" :placeholder="true" rightText="编辑" @rightClick="editFun()"></u-navbar>
		<view class="collection">
			<view class="item-box flex-box item-tips">
				<u-icon name="star-fill" color="#FFD700" size="10"></u-icon> 点击编辑可添加或修改收款信息
			</view>
			<view class="item-box">
				<view class="item-title alipay flex-box">
					<image src="@/static/img/aliply.png" class="ico"></image>支付宝
				</view>
				<view class="item-content">
					<view class="input-box flex-box">
						<text>姓名</text>
						<input type="text" class="box-1 text-right" :disabled="!isEdit" :placeholder="isEdit?'请输入支付宝姓名':'暂未填写'" v-model="list.alipay.name" />
					</view>
					<view class="input-box flex-box">
						<text>支付宝账号</text>
						<input type="text" class="box-1 text-right" :disabled="!isEdit" :placeholder="isEdit?'请输入支付宝账号':'暂未填写'" v-model="list.alipay.account_no" />
					</view>
					<view class="img-box" v-if="seeMore.alipay">
						<view class="flex-box img-title">
							<view class="box-1">
								收款二维码(选填)
							</view>
							<image src="@/static/img/up-img.png" v-if="isEdit" class="ico-code" @click="upImg('alipay')"></image>
						</view>
						<view class="img-code" v-if="list.alipay.payment_code">
							<u-icon v-if="isEdit" name="close-circle-fill" class="close" @click="delImg('alipay')"></u-icon>
							<image :src="imgFilter(list.alipay.payment_code)" mode="widthFix" class="code"></image>
						</view>
					</view>
					<view class="flex-box see-down" @click="exchangeShowMore('alipay')">
						<u-icon name="arrow-up" v-if="seeMore.alipay" color="#333" size="16"></u-icon>
						<u-icon name="arrow-down" v-else color="#333" size="16"></u-icon>
					</view>
				</view>
			</view>
			<view class="item-box">
				<view class="item-title wechat flex-box">
					<image src="@/static/img/wechat.png" class="ico"></image>微信
				</view>
				<view class="item-content">
					<view class="input-box flex-box">
						<text>姓名</text>
						<input type="text" class="box-1 text-right" :disabled="!isEdit" :placeholder="isEdit?'请输入微信姓名':'暂未填写'" v-model="list.wechat.name" />
					</view>
					<view class="input-box flex-box">
						<text>微信账号</text>
						<input type="text" class="box-1 text-right" :disabled="!isEdit"  :placeholder="isEdit?'请输入微信账号':'暂未填写'" v-model="list.wechat.account_no" />
					</view>
					<view class="img-box" v-if="seeMore.wechat">
						<view class="flex-box img-title">
							<view class="box-1">
								收款二维码(选填)
							</view>
							<image src="@/static/img/up-img.png" class="ico-code" v-if="isEdit" @click="upImg('wechat')"></image>
						</view>
						<view class="img-code" v-if="list.wechat.payment_code">
							<u-icon v-if="isEdit" name="close-circle-fill" class="close" @click="delImg('wechat')"></u-icon>
							<image :src="imgFilter(list.wechat.payment_code)" mode="widthFix" class="code"></image>
						</view>
					</view>
					<view class="flex-box see-down" @click="exchangeShowMore('wechat')">
						<u-icon name="arrow-up" v-if="seeMore.wechat" color="#333" size="16"></u-icon>
						<u-icon name="arrow-down" v-else color="#333" size="16"></u-icon>
					</view>
				</view>
			</view>
			<view class="item-box">
				<view class="item-title bank flex-box">
					<image src="@/static/img/bank.png" class="ico"></image>银行借记卡
				</view>
				<view class="item-content">
					<view class="input-box flex-box">
						<text>姓名</text>
						<input type="text" class="box-1 text-right" :disabled="!isEdit" :placeholder="isEdit?'请输入银行卡姓名':'暂未填写'" v-model="list.bank.name" />
					</view>
					<view class="input-box flex-box">
						<text>银行卡号</text>
						<input type="text" class="box-1 text-right" :disabled="!isEdit" :placeholder="isEdit?'请输入银行卡号':'暂未填写'" v-model="list.bank.account_no" />
					</view>
					<view class="input-box flex-box">
						<text>银行名称</text>
						<input type="text" class="box-1 text-right" :disabled="!isEdit" :placeholder="isEdit?'请输入银行名称':'暂未填写'" v-model="list.bank.bank_type_name" />
					</view>
				</view>
			</view>
		</view>
		<view class="fixed " v-if="isEdit">
			<view class="fixed-btn" @click="submitMsg()">
				保存
			</view>
		</view>
	</view>
</template>

<script>
	import request from "@/utils/request";
	export default{
		data(){
			return {
				isEdit:false,
				list:{
					alipay:{
						type:0,
						name:'',
						account_no:'',
						payment_code:'',
					},
					wechat:{
						type:1,
						name:'',
						account_no:'',
						payment_code:'',
					},
					bank:{
						type:2,
						name:'',
						account_no:'',
						bank_type_name:'',
					}
				},
				seeMore:{
					alipay:false,
					wechat:false
				},
				flag:true
			}
		},
		onLoad(){
			this.getInit()
		},
		methods:{
			getInit(){
				uni.showLoading({
					title:'数据加载中……'
				})
				this.$u.api.getPaymentInfo()
				.then(res=>{
					uni.hideLoading()
					if(res.status){
						this.list = {...res.msg}
						this.isEmptyData()
					}
				})
				.catch(err=>{
					uni.hideLoading()
				})
			},
			//判断对象里是否有值
			isEmptyData(){
				let _key1 = false
				let _key2 = false
				let _key3 = false
				for(let key in this.list.alipay){
					if(key == 'type') continue
					if(this.list.alipay[key]){
						_key1 = true
					}
				}
				for(let key in this.list.wechat){
					if(key == 'type') continue
					if(this.list.wechat[key]){
						_key2 = true
					}
				}
				for(let key in this.list.bank){
					if(key == 'type') continue
					if(this.list.bank[key]){
						_key3 = true
					}
				}
				if(!_key1 && !_key2 && !_key3){
					this.isEdit = true
				}
				console.log(_key1,_key2,_key3);
			},
			//编辑
			editFun(){
				this.isEdit = true
			},
			imgFilter(val){
			  return (val instanceof File) ? URL.createObjectURL(val):val
			},
			//上传图片
			upImg(item){
				uni.chooseImage({
					count: 1,
					success: (res) => {
						const tempFilePaths = res.tempFiles[0];
						const MAX_SIZE = 4 * 1024 * 1024;//2M
						uni.getFileInfo({
						  filePath: res.tempFilePaths[0],
						  success: (infoRes) => {
							if (infoRes.size > MAX_SIZE) {
							 this.$u.toast('图片大于4M，请上传小于4M的图片')
							  return;
							}
							this.list[item].payment_code = tempFilePaths
							this.$forceUpdate()
						  }
					  })
					}
				})
			},
			//删除图片
			delImg(item){
				this.list[item].payment_code = ''
				this.$forceUpdate()
			},
			//保存修改信息
			submitMsg(){
				if(!this.flag){
					this.$u.taost('请勿重复操作！')
					return
				}
				let _data = {}
				for(let k in this.list){
					if(this.list[k].name){
						_data[`name[${k}]`] = this.list[k].name
					}
					if(this.list[k].account_no){
						_data[`account_no[${k}]`] = this.list[k].account_no
					}
					if(this.list[k].payment_code){
						_data[`payment_code_${k}`]= this.list[k].payment_code
					}
				}
				if(this.list.bank.bank_type_name){
					_data['bank_type_name[bank]']=this.list.bank.bank_type_name
				}
				uni.showLoading({
					title:'保存中……'
				})
				request.requestFormData({
				  url:'/member/payment_cellinfo',
				  data:_data,
				}).then((res)=>{
					uni.hideLoading()
					this.flag = true
					this.$u.toast(res.msg)
					if(res.status){
						this.isEdit = false
					}
				})
				.catch(err=>{
					uni.hideLoading()
					this.flag = true
				})
			},
			//查看更多
			exchangeShowMore(item){
				this.seeMore[item] = !this.seeMore[item]
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F7FB;
	}
	.text-right{
		text-align: right;
	}
	.item-tips{
		font-size:26rpx;
	}
	.fixed{
		position: fixed;
		bottom:0;
		left:0;
		right:0;
		z-index:1;
		background: #fff;
		padding:30rpx 60rpx;
		.fixed-btn{
			background-color: $base;
			color:#fff;
			font-size:30rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			text-align: center;
			width: 100%;
		}
		
	}
	
	.collection {
		padding: 30rpx;
		padding-bottom: 160rpx;
		.item-box {
			margin-bottom: 30rpx;

			.item-title {
				border-radius: 20rpx 20rpx 0 0;
				padding:10rpx 0;
				width: 300rpx;
				color: #fff;
				font-size: 36rpx;

				.ico {
					width: 55rpx;
					height: 55rpx;
					display: block;
					margin: 0 20rpx;
				}
			}

			.alipay {
				background: #06B4FD;
			}

			.wechat {
				background: #05C160;
			}

			.bank {
				background: #9199A8;
			}
		}
		.see-down{
			padding:10rpx 0;
			justify-content: center;
		}
		.img-code{
			position: relative;
			z-index:0;
			width: 190rpx;
			height: 190rpx;
			overflow: hidden;
			padding:20rpx;
			.close{
				position: absolute;
				right:0;
				top:0;
				z-index:1;
				background: #fff;
				border-radius: 50%;
			}
			.code{
				width: 100%;
			}
		}
	}

	.item-content {
		background: #fff;
		padding: 20rpx;
		border-radius: 0 0 20rpx 20rpx;
		color: #7A7A7A;
		font-size: 30rpx;

		.input-box {
			border-radius: 20rpx;
			background: #F6F7FB;
			padding: 20rpx;
			margin-bottom: 20rpx;
			justify-content: space-between;

			.text {
				color: #333;
				font-weight: bolder;
			}

		}

		.img-title {
			padding: 20rpx 0;

			.ico-code {
				width: 58rpx;
				height: 44rpx;
			}
		}
	}
</style>